<template>
  <div :class="`${prefixCls}-wrap`">
    <!--     <Button type="primary" @click="(addModal = true), (isRapid = false)">
      添加事件
    </Button> -->
    <lunar-full-calendar :events="events" :config="config" />
    <a-modal title="添加事件" v-model="addModal" @ok="handleOk" @cancel="handleCancel">
      <a-form :label-col="{ span: 5 }" :wrapper-col="{ span: 19 }">
        <a-form-item label="事件标题">
          <a-input v-model="form.title"></a-input>
        </a-form-item>
        <a-form-item label="事件描述">
          <a-textarea v-model="form.description"></a-textarea>
        </a-form-item>
        <a-form-item label="事件开始日期" v-if="!isRapid">
          <a-date-picker v-model="form.startDay" valueFormat="YYYY-MM-DD" />
          <a-time-picker v-model="form.startTime" valueFormat="HH:mm:ss" style="margin-left: 15px" />
        </a-form-item>
        <a-form-item label="事件结束日期" v-if="!isRapid">
          <a-date-picker v-model="form.endDay" valueFormat="YYYY-MM-DD" />
          <a-time-picker v-model="form.endTime" valueFormat="HH:mm:ss" style="margin-left: 15px" />
        </a-form-item>
        <a-form-item label="事件文本颜色">
          <colorPicker v-model="form.textColor" class="color" />
        </a-form-item>
        <a-form-item label="事件背景颜色">
          <colorPicker v-model="form.backgroundColor" class="color" />
        </a-form-item>
        <a-form-item label="事件边框颜色">
          <colorPicker v-model="form.borderColor" class="color" />
        </a-form-item>
      </a-form>
    </a-modal>
    <a-modal title="预览事件" v-model="infoModal">
      <a-row type="flex">
        <a-col>标题:</a-col>
        <a-col push="1">{{ info && info.title }}</a-col>
      </a-row>
      <a-row type="flex">
        <a-col>描述:</a-col>
        <a-col push="1">
          {{ info && info.extendedProps && info.extendedProps.description }}
        </a-col>
      </a-row>
      <a-row type="flex">
        <a-col>时间:</a-col>
        <a-col push="1">
          <span>{{ info && info.startStr | dateFilter }}</span>
          <span v-if="info && info.endStr">
            ~ {{ info && info.endStr | dateFilter }}
          </span>
        </a-col>
      </a-row>
    </a-modal>
  </div>
</template>

<script>
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'
import timeGridPlugin from '@fullcalendar/timegrid'
import listPlugin from '@fullcalendar/list'
import interactionPlugin from '@fullcalendar/interaction'
import { addLongPress } from '@/utils/assits'
import dayjs from 'dayjs'

const prefixCls = 'ezb-calendar'

export default {
  name: 'Calendar',
  components: {
    FullCalendar
  },
  data () {
    return {
      prefixCls,
      isRapid: false,
      addModal: false,
      infoModal: false,
      info: null,
      form: {
        id: '',
        title: '',
        description: '',
        startDay: '',
        startTime: '',
        endDay: '',
        endTime: '',
        textColor: '#000',
        backgroundColor: '#3788d8',
        borderColor: '#3788d8'
      },
      events: [],
      config: {
        // 自定义渲染视图
        views: {
          dayGridMonth: {
            // https://fullcalendar.io/docs/date-formatting
            titleFormat: { year: 'numeric', month: '2-digit', day: '2-digit' }
          },
          timeGrid: {
            dayMaxEventRows: 6 // 当月份视图时。一天的事件多于6个时进行折叠
          }
        },
        plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin, listPlugin],
        // 自定义渲染头部
        header: {
          start: 'prev next today',
          center: 'title',
          end: 'dayGridMonth timeGridWeek timeGridDay listMonth'
        },
        // defaultView: 'dayGridMonth',
        // 是否可以拖拽
        editable: true,
        // 是否可添加
        selectable: true,
        // 自定义文本
        buttonText: {
          today: '今天',
          month: '月',
          week: '周',
          day: '天',
          list: '列表'
        },
        height: 750,
        // 语言
        locale: 'zh-cn',
        // 设置周几为第一天
        firstDay: 7,
        // 初始化视图
        // initialView: 'dayGridMonth',
        // 是否显示周末
        weekends: true,
        // 当事件过多时是否隐藏
        dayMaxEvents: true,
        events: [],
        dayMaxEventRows: true, // 开启日历事件过多时的折叠功能
        eventDidMount: info => {
          addLongPress(info, this.clickEvent, this.longPressEvent)
        },
        // 点击事件
        // eventClick: info => {
        //   console.log(info);
        // },
        // 缩放事件
        eventResize: info => {
          console.log(info)
        },
        // 拖拽事件
        eventDrop: info => {
          console.log(info)
        },
        // 重新渲染
        handleDatesRender: () => { },
        // 日期选中
        select: () => {
          this.addModal = true
          this.isRapid = true
        }
      }
    }
  },
  filters: {
    dateFilter (date) {
      return dayjs(date).format('YYYY-MM-DD HH:mm:ss')
    }
  },
  created () {
    // 模拟异步数据
    setTimeout(() => {
      this.options.events = [
        {
          id: '1',
          title: 'event 1',
          extendedProps: {},
          description: '这是一个事件',
          start: '2021-06-01',
          end: '2021-01-07',
          textColor: '#000',
          backgroundColor: 'red',
          borderColor: 'red'
        },
        { id: '2', title: 'event 2', start: '2021-06-01' },
        { id: '3', title: 'event 1', start: '2021-05-01' },
        { id: '4', title: 'event 2', start: '2021-07-01' },
        { id: '5', title: 'event 3', start: '2021-06-02' },
        { id: '6', title: 'event 4', start: '2021-06-03' },
        {
          id: '7',
          title: 'event 2',
          start: '2021-07-07 07:00:00',
          textColor: 'yellow',
          backgroundColor: 'red',
          className: ['red']
        },
        {
          id: '8',
          title: 'event 5',
          start: '2021-06-08 12:00:00',
          end: '2021-01-08 14:00:00',
          color: 'yellow'
          // textColor: 'red',
          // backgroundColor: 'red',
          // borderColor: 'yellow'
        },
        {
          id: '9',
          title: 'event 5',
          start: '2021-06-09'
          // textColor: 'yellow'
          // borderColor: 'yellow',
          // backgroundColor: 'red'
        }
      ]
    }, 2000)
  },
  methods: {
    addEvents () {
      const params = {}
      params.id = this.form.id ? this.form.id : dayjs().unix()
      params.title = this.form.title
      params.description = this.form.description
      params.start = this.filterDate(this.form.startDay, this.form.startTime)
      params.end = this.filterDate(this.form.endDay, this.form.endTime)
      params.textColor = this.form.textColor
      params.backgroundColor = this.form.backgroundColor
      params.borderColor = this.form.borderColor

      this.addModal = false
      this.options.events.push(params)
    },
    clickEvent (info) {
      this.addModal = true
      const event = info.event
      this.form.id = event.id
      this.form.title = event.title
      this.form.description = event.extendedProps.description
      this.form.startDay = event.startStr
      this.form.endDay = event.endStr
      if (event.startStr.includes(' ')) {
        this.form.startDay = event.startStr.split(' ')[0]
        this.form.startTime = event.startStr.split(' ')[1]
      }
      if (event.endStr.includes(' ')) {
        this.form.endDay = event.endStr.split(' ')[0]
        this.form.endTime = event.endStr.split(' ')[1]
      }
      this.form.textColor = event.textColor
      this.form.backgroundColor = event.backgroundColor
      this.form.borderColor = event.borderColor
      this.info = info.event
    },
    longPressEvent (info) {
      this.$confirm({
        title: '温馨提示',
        content: '是否确认删除',
        onOk: () => {
          this.options.events = this.options.events.filter(
            event => event.id !== info.event.id
          )
        },
        onCancel: () => { }
      })
    },
    filterDate (day, time) {
      return day + (time ? ' ' : '') + time
    },
    handleOk () {
      this.addEvents()
    },
    handleCancel () { }
  }
}
</script>

<style lang="less" scoped>
/deep/ a {
  color: #333;
}
.color {
  position: relative;
  left: 0px;
  top: 2px;
}
.ca {
  margin-top: 20px;
  font-size: 14px;
}
</style>
